<template>
  <div class="account-container">
    <!-- 会员信息 -->
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>会员信息</strong>
      <i class="myMsg"></i>
    </div>
    <div class="cell-container">
      <div class="cell-list">
        <div class="cell-item">
          <div class="left avatar">
            <img class="" :src="userInfo.userImg" alt="">
          </div>
          <div class="right">
            <i class="iconfont icon-right"></i>
          </div>
        </div>
        <div class="cell-item" @click="$router.push(`/collection`)">
          <div class="left">
            <span>会员名</span>
          </div>
          <div class="right">
            {{userInfo.userName}}
          </div>
        </div>
        <div class="cell-item" @click="$router.push(`/wallet`)">
          <div class="left">
            <span>会员身份</span>
          </div>
          <div class="right">
            <i class="iconfont icon-right"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="" style="padding:10px;">
      <div class="cell-btn bordered" @click="Logout">退出登录</div>
    </div>
    <!-- 会员信息 -->
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    Toast
  } from 'mint-ui'
  export default {
    data() {
      return {}
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      fetchData() {
        console.log(this.userInfo)
      },
      Logout() {
        Toast('退出成功')
        this.$store.dispatch('FedLogOut').then(res => {
          this.$router.push('/home')
        })
      }
    },
    mounted() {
      this.fetchData()
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .account-container {
    background: #fff;
    .cell-container {
      margin-top: $margin;
      .cell-list {
        .cell-item {
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          border-bottom: 1px solid #eee;
          margin-left: $padding;
          padding: $padding $padding $padding 0;
          .left {
            span {
              font-size: $subtitle;
              color: #333;
            }
          }
          .right {
            .icon-right {
              font-size: 13px;
              color: #ADADAD;
            }
          }
          &:last-child {
            margin-left: 0;
            padding-left: $padding;
          }
        }
      }
    }
  }

  .avatar {
    img {
      border: 1px solid rgba(0, 0%, 100%, .4);
      border-radius: 60px;
      width: 40px;
      height: 40px;
    }
  }

</style>
